<script setup>
import { ref, watch } from 'vue'
import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()
const props = defineProps({
    title: {
        type: Number,
        default: 1
    },
    form: {
        type: Object,
        default: () => { }
    },
    answer: {
        type: Object,
        default: () => { }
    }
})
const form = ref({})
const answer = ref({})
const title = ref(1)
const logic = ref({
    key: "",
    remark: "",
    titleKey: ""
})

const options = ref([
    {
        value: "1",
        label: "跳转下一题"
    },
    {
        value: "2",
        label: "结束问卷"
    },
    {
        value: "3",
        label: "选择后跳转到第几题"
    },
    {
        value: "4",
        label: "添加一个文字描述"
    }
])

const titleOption = ref([])

// 深拷贝函数
function deepClone(obj) {
    if (obj === null || typeof obj !== 'object') {
        return obj;
    }

    if (obj instanceof Date) {
        return new Date(obj.getTime());
    }

    if (obj instanceof Array) {
        return obj.map(item => deepClone(item));
    }

    if (obj instanceof Object) {
        const clonedObj = {};
        for (let key in obj) {
            if (obj.hasOwnProperty(key)) {
                clonedObj[key] = deepClone(obj[key]);
            }
        }
        return clonedObj;
    }
}

watch(() => props.title, (newVal) => {
    if (newVal) {
        title.value = newVal
        titleOption.value = counter.menu.map(m => {
            return {
                value: m.path,
                label: m.name,
                ...m
            }
        })
    }
}, {
    immediate: true,
    deep: true
})

watch(() => props.form, (newVal) => {
    if (newVal) {
        // 使用深拷贝避免影响源数据
        form.value = deepClone(newVal)
    }
}, {
    immediate: true,
    deep: true
})

watch(() => props.answer, (newVal) => {
    if (newVal) {
        // 使用深拷贝避免影响源数据
        answer.value = deepClone(newVal)
        if (newVal.logic) {
            logic.value.key = newVal.logic
        } else {
            logic.value.key = ''
        }
    }
}, {
    immediate: true,
    deep: true
})

function typeChange(value) {
    counter.updateMenuType(value, form.value)
}

function radioChange(value) {
    counter.updateMenuRadio(value, form.value)
}

function handleChange(value, form) {
    // 传递深拷贝的数据避免影响源数据
    counter.updateMenu(deepClone(value), deepClone(form), logic.value.key)
    if (logic.value.key == 4) {

    }
}

function handleTitleKey(value, form) {
    // 传递深拷贝的数据避免影响源数据
    counter.updateMenutitleKey(deepClone(value), deepClone(form), logic.value.titleKey)
}

function handleRemarkKey(value, form) {
    // 传递深拷贝的数据避免影响源数据
    counter.updateMenuRemark(deepClone(value), deepClone(form), logic.value.remark)
}

</script>

<template>
    <section class="aside-right">
        <h3 class="title-edit">{{ title == 1 ? '题目编辑' : '答案编辑' }}</h3>
        <div class="form-edit" v-if="title == 1">
            <el-form :model="form" label-width="auto">
                <el-form-item label="问题类型" label-position="top">
                    <el-radio-group v-model="form.type" @change="typeChange">
                        <el-radio label="1">情绪问答题</el-radio>
                        <el-radio label="2">问答陈述题</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="是否多选" label-position="top" v-if="form.type == 1">
                    <el-radio-group v-model="form.radio" @change="radioChange">
                        <el-radio value="1" size="large">单选</el-radio>
                        <el-radio value="2" size="large">多选</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
        </div>
        <div class="form-edit" v-if="title == 2">
            <el-form :model="logic" label-width="auto">
                <el-form-item label="答案跳转逻辑" label-position="top">
                    <el-select v-model="logic.key" placeholder="请选择跳转逻辑" @change="handleChange(answer, form)" clearable>
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="跳转题目" label-position="top" v-if="logic.key == 3">
                    <el-select v-model="logic.titleKey" placeholder="请选择跳转逻辑" @change="handleTitleKey(answer, form)"
                        clearable>
                        <el-option v-for="item in titleOption" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="描述" label-position="top" v-if="logic.key == 4">
                    <el-input v-model="logic.remark" placeholder="请输入文字描述" clearable
                        @blur="handleRemarkKey(answer, form)" />
                </el-form-item>
            </el-form>
        </div>

    </section>
</template>
<style scoped lang="scss">
.aside-right {
    // background-color: azure;
    border: 1px solid #eee;
    height: 100%;
    width: 400px;
    padding: 20px;
    box-sizing: border-box;
}

.title-edit {
    font-size: 18px;
}

.form-edit {
    margin-top: 20px;
}
</style>